<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>异步加载</title>
    <meta name="viewport" content="width=device-width">
    <meta name="descriptions" content="kindeditor异步加载"/>
    <link type="text/css" rel="stylesheet" href="../style/avalon.doc.css"/>
    <script src="../highlight/shCore.js"></script>
    <script type="text/javascript" src="../avalon.js"></script>
</head>
<body ms-controller="demo">
    <div class="wrapper">
        <h1>异步加载</h1>
        <form>
            <textarea id="text" name="content" style="width:800px;height:200px;"></textarea>
            <p>
                <input type="button" ms-click="create" value="加载JS并创建编辑器" />
                <input type="button" ms-click="remove" value="删除编辑器" />
            </p>
        </form>
        <pre class="brush:html;gutter:false;" ms-skip>
            &lt;!DOCTYPE html&gt;
            &lt;html&gt;
            &lt;head lang="en"&gt;
                &lt;meta charset="UTF-8"&gt;
                &lt;title&gt;异步加载&lt;/title&gt;
                &lt;meta name="viewport" content="width=device-width"&gt;
                &lt;meta name="descriptions" content="kindeditor异步加载"/&gt;
                &lt;link type="text/css" rel="stylesheet" href="../style/avalon.doc.css"/&gt;
                &lt;script src="../highlight/shCore.js"&gt;&lt;/script&gt;
                &lt;script type="text/javascript" src="../avalon.js"&gt;&lt;/script&gt;
            &lt;/head&gt;
            &lt;body ms-controller="demo"&gt;
                &lt;div class="wrapper"&gt;
                    &lt;h1&gt;异步加载&lt;/h1&gt;
                    &lt;form&gt;
                        &lt;textarea id="text" name="content" style="width:800px;height:200px;"&gt;&lt;/textarea&gt;
                        &lt;p&gt;
                            &lt;input type="button" ms-click="create" value="加载JS并创建编辑器" /&gt;
                            &lt;input type="button" ms-click="remove" value="删除编辑器" /&gt;
                        &lt;/p&gt;
                    &lt;/form&gt;
                &lt;/div&gt;
            &lt;script&gt;
                var text = document.getElementById("text")

                var demoVM = avalon.define(&#123;
                    $id: "demo",
                    create: function() &#123;
                        text.setAttribute("ms-widget", "kindeditor")
                        require(["./kindeditor/avalon.kindeditor", "domReady!"], function() &#123;
                            avalon.scan(text, avalon.vmodels.demo)
                        &#125;)
                    &#125;,
                    remove: function() &#123;
                        var vmId = text.getAttribute("avalonctrl")

                        if(vmId) &#123;
                            avalon.vmodels[vmId].remove()
                            text.removeAttribute("avalonctrl")
                        &#125;
                    &#125;
                &#125;);

            &lt;/script&gt;
            &lt;/body&gt;
            &lt;/html&gt;
        </pre>
    </div>
<script>
    var text = document.getElementById("text")

    var demoVM = avalon.define({
        $id: "demo",
        create: function() {
            text.setAttribute("ms-widget", "kindeditor")
            require(["./kindeditor/avalon.kindeditor", "domReady!"], function() {
                avalon.scan(text, avalon.vmodels.demo)
            })
        },
        remove: function() {
            var vmId = text.getAttribute("avalonctrl")

            if(vmId) {
                avalon.vmodels[vmId].remove()
                text.removeAttribute("avalonctrl")
            }
        }
    })

</script>
</body>
</html>